<template>
	<view class="bods">
		<view v-for="(item,index) in flist" class="formcard" :key="index">
			<u-form  labelPosition="left" :model="item">
				<view  style="padding: 25rpx 35rpx;display: flex;width: 100%;margin: 0 auto;  border-bottom:1px solid #e6e6e6;box-sizing: border-box;justify-content: space-between;">
                     <view class="">
						 <span>行程{{index+1}}</span>
						 <span  @click='moveDown(flist,index)'  v-if="index !== flist.length-1" style='margin-left: 40rpx;color:rgb(0,122,255) ;'>下移</span>
						 <span @click='moveUp(flist,index)' v-if="index!==0" style='margin-left: 40rpx;color:rgb(0,122,255) ;'>上移</span>
					 </view>
                    <view class="">
						<span>
							<image style="width: 40rpx;height: 40rpx; margin-left: 230rpx;" src="@/static/newimg/dX.svg" mode="widthFix"></image>
						</span>
						<span>
						<image style="width: 40rpx;height: 40rpx;margin-left:20rpx;" src="@/static/newimg/gB.svg" mode="widthFix"></image>
						</span>
					</view>
				</view>
				<u-form-item  required labelWidth="170rpx"   label="出差人"  borderBottom ref="item1" >
					<input class="pdlf" type="text" v-model="item.empNm">
					<!-- <span style='color:rgb(0,122,255);display: inline-block;padding-left: 20rpx;width: 100rpx;'>共2人</span> -->
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item required labelWidth="170rpx"   label="行程类型"  borderBottom ref="item1" >
                  <span class="pdlf">{{item.cityType==0?'境内':'境外'}}</span>
				</u-form-item>
				<u-form-item required labelWidth="170rpx"   label="出发时间" borderBottom >
					<!-- <text class="pdlf">2022-3-5 20:30:40</text> -->
					<uni-datetime-picker  class="pdlf" type="datetime" v-model="item.routeStartDate"  :border="false":clear-icon="false" @change="timeDate($event,index)"  placeholder="请选择出发时间">
					 <view class="" style="width: 100%;height: 40rpx;"  slot="date">
						 <input type="text" v-if="!item.routeStartDate" placeholder="请选择出发时间" disabled>
						 {{item.routeStartDate?item.routeStartDate:''}}
					 </view>
					</uni-datetime-picker>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item required labelWidth="170rpx"   label="出发地点" borderBottom ref="item1" >
					<text class="pdlf">{{item.startLocation}}</text>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item required labelWidth="170rpx"   label="到达地点"  borderBottom ref="item1" >
					<text class="pdlf">{{item.dest}}</text>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item required labelWidth="170rpx"   label="交通工具"  borderBottom ref="item1"  @click="pickerClick(index)">
					<u-picker @cancel="close()" :show="show" @confirm="confirm($event)" :columns="columns" keyName="label">
					</u-picker>
					<span>{{item.vehicle=='0'?'飞机':''||item.vehicle=='1'?'火车':''||item.vehicle=='2'?'长途及其他':''}}</span>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item required labelWidth="170rpx" :borderBottom=false  label="行程备注"   ref="item1" >
				</u-form-item>
				<view style="width: 90%;margin: 0 auto;">
					<u--textarea count v-model="value1" border='none' placeholder="请输入"></u--textarea>
				</view>
				<view style="height: 20rpx;"></view>
				<!-- <u-button @click="submits(index)">提交</u-button> -->
			</u-form>
		</view>
	</view>
</template>	

<script>
export default {
	props:['flist'],
	data() {
		return {
			datetimesingle:'',
			pickindex:'',
			value1:'',
			showSex: false,
			busiTripRouteEntityList:[],//行程实际
		    show: false,
			columns: [
			    [
				{
			        label: '飞机',
			        id: '0'
                 },
				 {
				     label: '火车',
				     id: '1'
				  },
				  {
				      label: '长途及其他',
				      id: '2'
				   },
			    ],
				],
			model1: {
				userInfo: {
					name: '张三一、王四二',
				},
			},
		}
	},
	mounted() {
	   let _this = this;
	   _this.busiTripRouteEntityList = _this.flist;
	},
	methods: {	
		// 时间选择
		timeDate(e,index){
			let _this = this;
			if(e.length>11){
				_this.$set(_this.busiTripRouteEntityList[index],'routeStartDate',e);
			}else{
				_this.$set(_this.busiTripRouteEntityList[index],'routeStartDate',e+'00:00:00');
			}
		},
		// 取消类型弹框
		close(){
			this.show =false;
		},
		pickerClick(index){
			this.pickindex = index;
			this.show = true;
		},
		//选择交通类型触发
		confirm(e){
			let _this = this;
			let index =  _this.pickindex;
			_this.$set(_this.busiTripRouteEntityList[index],'vehicle',e.value[0].id);
			_this.pickindex = "";
			_this.show = false;
		},
		// 上移
		moveUp(list, index) {
		    if (index != 0) {
		      list[index] = list.splice(index - 1, 1, list[index])[0];
		    } else {
		      // list.push(list.shift());
		    }
		},
		// 下移
		moveDown(list, index) {
			if (index != list.length - 1) {
			    list[index] = list.splice(index + 1, 1, list[index])[0];
			  } else {
				return false
			  }
			},
		},	
}
</script>

<style lang="scss" scoped>
.bods {
	height: auto;
	background-color: rgb(248, 249, 251);
	width: 100%;
	margin-bottom: 80rpx;
}
.formcard{
	width: 90%;
	margin: 0 auto;
	margin-bottom: 50rpx;
	background-color: white;
	border-radius:8px;
	font-size: 28rpx;
	box-sizing: border-box;
	input{
		font-size: 28rpx;
	}
}
.pdlf{
	width: 100%;
}
.u-textarea {
	background-color: #fafafa;
	margin: 10rpx 0;
}

</style>
